<template>
  <a-button type="outline" @click="handleClick">AI 生成题目 </a-button>
  <a-drawer :width="340" :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
    <template #title>
      AI 生成题目
    </template>
    <div>
      <a-form
          :model="form"
          label-align="left"
          auto-label-width
          @submit="handleSubmit"
      >
        <a-form-item label="应用 id">
          {{ appId }}
        </a-form-item>
        <a-form-item field="questionNumber" label="题目数量">
          <a-input-number min="0" max="5" v-model="form.questionNumber" placeholder="请输入题目数量" />
        </a-form-item>
        <a-form-item field="optionNumber" label="选项数量">
          <a-input-number min="0" max="6" v-model="form.optionNumber" placeholder="请输入选项数量" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button :loading="submitting" type="primary" html-type="submit" style="width: 120px">
              {{ submitting ? "生成中" : "一键生成" }}
            </a-button>
            <a-button :loading="ssesubmitting"  @click="handleSSESubmit" style="width: 120px">
              {{ submitting ? "生成中" : "实时生成" }}
            </a-button>
          </a-space>

        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import {defineProps, reactive, ref, withDefaults} from "vue";
import API from "@/api";
import message from "@arco-design/web-vue/es/message";
import {aiGenerateQuestionUsingPost} from "@/api/questionController";

interface Props {
  appId: string;
  onSuccess?: (result:API.QuestionContentDTO[]) => void;
  onSSESuccess?: (result:API.QuestionContentDTO[]) => void;
  onSSEStart?: (event: any) => void;
  onSSEClose?: (event:any) => void;
}

const props = withDefaults(defineProps<Props>(), {
  appId: () => {
    return "";
  },
});

const form = reactive({
  questionNumber : 5,
  optionNumber : 2,
} as API.AiGenerateQuestionRequest);

const visible = ref(false);
const submitting = ref(false);
const ssesubmitting = ref(false);

const handleClick = () => {
  visible.value = true;
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
}

/**
 * 提交
 */
const handleSubmit = async () => {
  if (!props.appId) {
    return;
    }
  submitting.value = true;
  const res = await aiGenerateQuestionUsingPost({
    appId: props.appId as any,
    ...form,
  });
  if (res.data.code === 0 && res.data.data.length > 0) {
    if (props.onSuccess) {
      props.onSuccess(res.data.data);
    } else {
      message.success("题目生成成功");
    }
    // 关闭抽屉
    handleCancel();
  }else {
    message.error("题目生成失败" + res.data.message);
    }
  submitting.value = false;
};
/**
 * 提交（实时生成）
 */
const handleSSESubmit = async () => {
  if (!props.appId) {
    return;
  }
  // 创建 SSE 请求
  ssesubmitting.value = true;

  // todo 手动填写完整的请求地址
  const eventSource = new EventSource(
      'http://localhost:8101/api/question/ai_generate/sse'+
      `?appId=${props.appId}&questionNumber=${form.questionNumber}&optionNumber=${form.optionNumber}`
      );
  let first = true;
  // 接收消息
  eventSource.onmessage = (event) => {
    if (first) {
      props.onSSEStart?.(event);
      handleCancel();
      first = !first;
    }
    props.onSSESuccess?.(JSON.parse(event.data));
  };
  // 错误处理
  eventSource.onerror = (event) => {
    if( event.eventPhase === EventSource.CLOSED) {
      console.log("连接关闭");
      props.onSSEClose?.(event)
      eventSource.close();
    }
  };
  // 连接建立
  eventSource.onopen = (event) => {
    console.log("连接建立");
    props.onSSEStart?.(event);
    handleCancel();
  };
  ssesubmitting.value = false;
};
</script>